<template>
  <div>
    <Title :title="'路口通行效率'"/>
    <div class="box">
      <div class="itemBg" v-for="item in dataList" :key="item.name">
        <div class="itemBgFlex">
          <div class="itemBgLeft">
            <!-- <div>{{ item.icon }}</div> -->
            <img :src="item.url" alt="">
          </div>
          <div class="itemBgRight">
            <div>{{ item.name + item.unit }}</div>
            <div>{{ item.total }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, computed, watch } from 'vue';
import Title from './title.vue'
import { useUserStore } from '@/store/user';
// import { xiaoche } from '@/assets/images/imagesIn'
import { getJunctionStatistic } from '../../../utils/apiComponent'
// import icon_kongjian from '[publicPath]static/images/componentright/icon_kongjian.png'
// import icon_baohedu from '[publicPath]static/images/componentright/icon_baohedu.png'
// import icon_liuliang from '[publicPath]static/images/componentright/icon_liuliang.png'
// import icon_shijian from '[publicPath]static/images/componentright/icon_shijian.png'
// import icon_xingcheng from '[publicPath]static/images/componentright/icon_xingcheng.png'
// import icon_tingche from '[publicPath]static/images/componentright/icon_tingche.png'
export default defineComponent({
  name: 'ComponentOne',
  components: {
    Title
  },
  setup() {
    const data = reactive({
      dataList:[{
        // icon: xiaoche,
        name: '14',
        total: '时间占有率',
        unit: '%',
        url: '[publicPath]static/images/componentright/icon_shijian.png'
      }, {
        // icon: xiaoche,
        name: '14',
        total: '行程时间',
        unit: 's',
        url: '[publicPath]static/images/componentright/icon_xingcheng.png'
      }, {
        // icon: xiaoche,
        name: '14',
        total: '饱和度',
        unit: '',
        url: '[publicPath]static/images/componentright/icon_baohedu.png'
      }, {
        // icon: xiaoche,
        name: '14',
        total: '空间占有率',
        unit: '%',
        url: '[publicPath]static/images/componentright/icon_kongjian.png'
      }, {
        // icon: xiaoche,
        name: '14',
        total: '停车延误',
        unit: 's',
        url: '[publicPath]static/images/componentright/icon_tingche.png'
      }, {
        // icon: xiaoche,
        name: '14',
        total: '流量',
        unit: '',
        url: '[publicPath]static/images/componentright/icon_liuliang.png'
      }]
    })
    const initData = () => {
      getJunctionStatistic().then((res) => {
        // console.log(res)
        data.dataList[0].name = res.timePer
        data.dataList[1].name = res.costTime
        data.dataList[2].name = res.spacePer
        data.dataList[3].name = res.busyPer
        data.dataList[4].name = res.stopDelay
        data.dataList[5].name = res.carFlow
      })
    }
    const userStore = useUserStore()
    // 获取搜索路口值
    const searchValue = computed(() => {
      initData()
      return userStore.getSearchValueId
    })
    watch(searchValue, () => {})

    onMounted(() => {
      // initData()
    })
    const refData = toRefs(data)
    return {
      ...refData
    }
  }
})
</script>

<style lang="less" scoped>
.box{
  width: 100%;
  margin-bottom: 10px;
}
.itemBgFlex{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // height: 48px;
}
.itemBg{
  width: 33%;
  // padding: 0 7px;
  // margin-right: 14px;;
  font-size: 16px;;
  // background-image: url('@{publicPath}static/images/bg_ganzhiduixiagn.png');
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  display: inline-block;
  // background: rgba(48,81,120,0.4);
  // border: 1px solid rgba(90,176,237,0.4);
  // margin-bottom: 20px;

  // align-items: center;
  // justify-content: space-between;
}
.itemBg:nth-child(3), .itemBg:nth-child(6){
  margin-right: 0;
}
.itemBgRight{
  display: flex;
  flex-direction: column;
  // height: 18px;
  justify-content: center;
  align-items: flex-start;
  color: rgba(203,233,255,0.5);
}
.itemBgRight div:nth-child(1){
  font-size: 18px;
  margin-right: 2px;
  margin-bottom: 10px;
  color: rgba(0, 247, 255, 1);
}
.itemBgRight div:nth-child(2){
  font-size: 14px;
}
.itemBgLeft{
  display: flex;
  // height: 18px;
  justify-content: flex-start;
  align-items: center;
  width: 120px;
  height: 90px;;

}
img{
  width: 100%;
  height: 100%;;
  margin-top: 40px;
}
</style>